<template>
  <a-card
    title="cardTitle"
    loading="loading"
    :bordered="false"
    class="ant-card__body-nopadding g-card-bgc"
    extra="extra"
    style="min-width: 400px"
  >
    <template #extra>
      <div>
        <a class="mr-sm noticeIcon" @click="loadNotifications()">
          <i class="iconfont icon-reload"></i>
        </a>
        <!-- 表头在这里 -->
        <a class="noticeIcon" @click="chantNotificationSettings()">
          <i class="iconfont icon-setting"></i>
        </a>
      </div>
    </template>
    <template #cardTitle>
      <a-badge count="unreadNotificationCount" standalone></a-badge>
      {{ l('NewNotifications') }}
    </template>
    <!-- 通知列表 -->
    <a-row
      class="py-sm bg-grey-lighter-h point havePoint"
      v-for="item in notifications"
      @click="gotoUrl(item.url)"
      :key="item.id"
    >
      <a-col span="21" style="display: flex; align-items: center">
        <div class="iconM"><i class="gcticons gcttongzhi21"></i></div>
        <a-col span="20">
          <p class="mb0" style="font-size: 18px">
            <a-tooltip title="item.text">
              {{ item.text }}
            </a-tooltip>
          </p>
          <p class="setUpItem">
            {{ item.time }}
            <a @click="setNotificationAsRead(item)">{{ l('SetAsRead') }}</a>
          </p>
        </a-col>
      </a-col>
    </a-row>

    <!-- 没有数据 -->
    <a-row class="noItem" v-if="!notifications || notifications.length === 0">
      <a-col span="24" class="pt-md border-top-1 text-center text-grey point">
        <a-empty description="l('ThereIsNoNotification')" />
      </a-col>
    </a-row>

    <!-- 查看所有通知 -->
    <a-row v-if="unreadNotificationCount !== 0">
      <a-col span="12" class="pt-md border-top-1 text-center text-grey point">
        <a-button @click="setAllUserNotificationsAsRead()" type="button" class="lookBtn">{{
          l('SetAllAsRead')
        }}</a-button>
      </a-col>
      <a-col span="12" class="pt-md border-top-1 text-center text-grey point">
        <a-button
          style="width: 164px; height: 40px; border-radius: 20px"
          Type="primary"
          router-Link="/app/setting/notifications"
        >
          {{ l('SeeAllNotifications') }}
        </a-button>
      </a-col>
    </a-row>
    <a-row v-if="unreadNotificationCount === 0">
      <a-col
        span="24"
        style="padding: 0 24px"
        class="pt-md border-top-1 text-center text-grey point"
      >
        <a-button
          style="width: 100%; height: 40px; border-radius: 20px"
          type="primary"
          router-Link="/app/setting/notifications"
        >
          {{ l('SeeAllNotifications') }}
        </a-button>
      </a-col>
    </a-row>
  </a-card>
</template>

<script lang="ts">
  import { AppConsts } from '/@/abpPro/AppConsts';
  import { AppComponentBase } from '/@/shared/component-base';
  import {
    GetUserNotificationsInput,
    NotificationServiceProxy,
    UserNotificationState,
  } from '/@/shared/service-proxies';
  import UserNotificationHelper from '/@/shared/helpers/UserNotificationHelper';
  import HeaderNotificationSettingsComponent from './settings/header-notification-settings.vue';
  import { defineComponent } from 'vue';
  export default defineComponent({
    mixins: [AppComponentBase],
    data() {
      return {
        visible: true,
        notifications: [] as any,
        unreadNotificationCount: 0,
        notificationService: new NotificationServiceProxy(),
        userNotificationHelper: UserNotificationHelper,
        UserNotificationState: UserNotificationState,
      };
    },
    mounted() {
      this.loadNotifications();
      this.registerToEvents();
      this.userNotificationHelper.init();
    },
    methods: {
      /** 加载数据 */
      loadNotifications() {
        this.loading = true;
        const input = new GetUserNotificationsInput();
        input.state = UserNotificationState.Unread;
        input.maxResultCount = AppConsts.notificationCount;
        input.skipCount = 0;
        this.notificationService
          .getPagedUserNotifications(input)
          .finally(() => {
            this.loading = false;
          })
          .then((result) => {
            this.unreadNotificationCount = result.unreadCount;
            this.notifications = [];
            result.items?.forEach((item) => {
              this.notifications.push(this.userNotificationHelper.format(item as any));
            });
          });
      },

      /** 注册事件 */
      registerToEvents() {
        abp.event.on('abp.notifications.received', () => {
          this.loadNotifications();
        });

        abp.event.on('app.notifications.refresh', () => {
          this.loadNotifications();
        });

        abp.event.on('app.notifications.read', (userNotificationId) => {
          for (let i = 0; i < this.notifications.length; i++) {
            if (this.notifications[i].userNotificationId === userNotificationId) {
              this.notifications[i].state = 'READ';
            }
          }
          this.unreadNotificationCount -= 1;
        });
      },
      /** 设置全部消息已读 */
      setAllUserNotificationsAsRead() {
        this.userNotificationHelper.setAllAsRead();
      },
      /** 打开通知配置 */
      chantNotificationSettings() {
        this.modalHelper.create(HeaderNotificationSettingsComponent).subscribe(() => {});
      },
      /** 设置当条消息已读 */
      setNotificationAsRead(userNotification) {
        this.userNotificationHelper.setAsRead(userNotification.userNotificationId);
      },
      /** 跳转到消息通知界面 */
      gotoUrl(url) {
        if (url) {
          location.href = url;
        }
      },
    },
  });
</script>
